<template>
    <div>
        <Daohang @paixu="handleCommand" @biaoqian="handleCommand1" @pingpai="handleCommand2" @youhuo="youhuo" @heng="heng" @shu="shu"/>

        <el-table v-show="table"
                :data="istrue?GoodsDada:tableData"
                style="width: 94%;margin: auto">
            <el-table-column
                    label="商品"
                    width="500">
                <template slot-scope="scope">
                    <div  style="overflow: hidden">
                        <div class="block" style="width: 100px; height: 100px;float: left;border:1px solid  #cecece">
                            <el-image style="width: 100px; height: 100px;" @click="xiangqing1(scope.$index, scope.row)"
                                    :src=scope.row.goodsImg.goodsImgUrl></el-image>
                        </div>
                        <div style="text-align: left; margin-left: 1rem; float: left;">
                            <a  @click="xiangqing1(scope.$index, scope.row)" class="zi">编码:{{scope.row.goodsId}}</a>
                            <br>
                            <a  @click="xiangqing1(scope.$index, scope.row)" class="xiangqing">{{scope.row.goodsName}}</a>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                    label="价格"
                    prop="goodsOrderPrice"
                    width>
                <template slot-scope="scope">
                ￥{{scope.row.goodsOrderPrice}}
                </template>
            </el-table-column>
            <el-table-column
                    label="订购数量"
                    prop="num"
                    width="130">
                <template slot-scope="scope">
                    <el-input v-model=scope.row.num  placeholder="请输入数量"  @change="inputChange1(scope.$index, scope.row)"></el-input>
                </template>
            </el-table-column>
            <el-table-column
                    label="单位"
                    prop="goodsUnit"
                    width="50">
                <template slot-scope="scope">
                    {{scope.row.goodsUnit.goodsUnitName}}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <a     class="abc"
                            type="#099FB8"
                            @click="xiangqing1(scope.$index, scope.row)">详情</a>
                </template>
            </el-table-column>
        </el-table>

        <div v-show="img">
            <ul class="box"
                :data="istrue?GoodsDada1:tableData1">
                <li class="bigimg"  v-for="(val,key) in istrue?GoodsDada1:tableData1" >
                    <div class="wapper">
                        <div class="item-img">
                            <a  @click="goodDetail(val)" >
                                <el-image   style="width: 250px;height: 200px" :src=val.goodsImg.goodsImgUrl />
                            </a>
                        </div>
                        <div class="price" >
                          ￥  <span>{{val.goodsOrderPrice}}</span>
                        </div>
                        <div class="name">
                            <a @click="goodDetail(val)">{{val.goodsName}}</a>
                        </div>
                        <div class="spec">
                            <span class="spec1">数量</span>
                            <span class="spec2">
                                <el-input v-model=val.num  placeholder="请输入数量"></el-input>
                            </span>
                            <span class="spec1">{{val.goodsUnit.goodsUnitName}}</span>
                        </div>
                        <div class="bottom">
                            <a @click="addCar(val)">
                                <i class="el-icon-shopping-cart-1"></i>
                                加入购物车</a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>

        <el-row :gutter="20" class="main-t elRow">
            <el-col :span="1"><div class="el"></div></el-col>
            <el-col :span="22">
        <div class="bottom">
            <div class="total">
                共计：{{currentData}}条
            </div>
            <div class="fenye">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="currentData"
                        :page-size="5"
                        :pager-count="7"
                        @current-change="changePage">
                </el-pagination>
            </div>
          </div>
         </el-col>
            <el-col :span="1"><div class="el"></div></el-col>
       </el-row>
    </div>
</template>

<script>
    import Daohang from '../../components/yc/Daohang'
    import {mapActions,mapGetters} from 'vuex'
    export default {
        name: "GoodsList",
        components:{
            Daohang
        },
        data(){
            return{
                num:'0',
                table:true,
                img:false,
                tableData:[],
                tableData1:[],
                istrue:true,
                obj:0,
                id:0
            }
        },
        created(){
            this.Data().then(res => {    //商品列表

            })
            this.Data1().then(res => {    //商品图片列表

            })
            // this.queryGoodsByKeyword().then(res =>{    //排序
            //
            // })
            this.addCars().then(res => {    //加入购物车、

            })
            this.queryGoodsName().then(res => {    //搜索商品、

            })
        },
        computed:{
            GoodsDada(){   //商品列表
                return this.$store.state.getGood.GoodsDada
            },
            GoodsDada1(){   //商品图片列表
                return this.$store.state.getGood.GoodsDada1
            },
            currentData(){      //分页
                return this.$store.state.getGood.currentData
            },
            getGoodsCar(){    //加入购物车
                return this.$store.state.addCar.GoodsCar
            },
            GoodsDadaDetail(){   //商品详情
                return this.$store.state.queryGoodsDetail.GoodsDadaDetail
            },
        },
        methods:{
            ...mapActions(['Data','Data1','queryGoodsByKeyword','addCars','changeNum',"getGoodId",
               "DataDetail","queryGoodsName","queryGoodsByKeyword1"
            ]),
            getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var seperator2 = ":";
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
            + " " + date.getHours() + seperator2 + date.getMinutes()
            + seperator2 + date.getSeconds();
        return currentdate;
             },  //获取时间
            addCar(val){         //图片加入购物车
                let obj=val.num
                this.changeNum(obj)
                this.obj=obj
                let id=val.goodsId
                this.getGoodId(id)
                this.id=id
                let time=this.getNowFormatDate()
                console.log(time)
                if(val.num==='0'){
                    this.$message.error('加入购物车数量不能为0！');
                }else if(parseInt(val.availableStockNumber)>=parseInt(val.num)&&parseInt(val.num)>'0'){
                    let a={
                        obj,
                        id,
                        time
                    }
                    this.addCars(a)
                    this.$message({
                        duration:1000,
                        iconClass:'el-icon-success',
                        dangerouslyUseHTMLString: true,
                        message: '<p style="margin-left: 2rem">成功加入购物车！</p>'
                    });
                } else {
                    this.$message('请输入正确的数字！');
                }
            },
            handleCommand(command) {     //排序
                // console.log(command)
                this.queryGoodsByKeyword(command)
                this.queryGoodsByKeyword1(command)
            },
            handleCommand1(command) {     //标签
                console.log(command)
                this.Data(1)
            },
            handleCommand2(command) {     //品牌
                console.log(command)
                this.Data(1)
            },
            youhuo(command){           //checkbox
                console.log(command)
                if(command===true){
                    this.Data(1)
                }else {
                    this.Data(1)
                }
            },
            heng(){
                // console.log(this.GoodsDada)
                this.img=true
                this.table=false
            },
            shu(){
                this.img=false
                this.table=true
            },
            goodDetail(val){   //图片查看商品详情
                let id=val.goodsId
                this.getGoodId(id)
                this.id=id
                this.DataDetail(this.id)
                 this.$router.push("/Main/Goods/GoodsDetails")
            },
            xiangqing1(index, row) {       //列表查看详情
                let id=row.goodsId
                this.getGoodId(id)
                this.id=id
                this.DataDetail(this.id)
                // console.log(this.GoodsDadaDetail.isFavorites)
                    this.$router.push("/Main/Goods/GoodsDetails")
            },
            changePage(val){            //分页
                if( this.table===true){
                    this.Data(val)
                }else {
                    this.Data1(val)
                }
            },
            inputChange1(index, row){            //列表改变
                let obj=row.num
                this.changeNum(obj)
                this.obj=obj
                let id=row.goodsId
                this.getGoodId(id)
                this.id=id
                console.log(row.num)
                if(parseInt(row.availableStockNumber)>=parseInt(row.num)&&parseInt(row.num)>=0){
                    this.$message({
                        duration:1000,
                        iconClass:'el-icon-success',
                        dangerouslyUseHTMLString: true,
                        message: '<p style="margin-left: 2rem">成功加入购物车！</p>'
                    });
                    let a={
                        obj,
                        id
                    }
                    this.addCars(a)
                }else {
                    this.$message.error('订购数量错误！');
                }
            }
        }
    }
</script>

<style>
    .el-table td, .el-table th{
        text-align: center;
    }
</style>
<style scoped>
    *{
        list-style: none;
    }
    .el-table thead{
        background-color: #cecece;
        margin: auto;
    }
    .abc{
        cursor: pointer;
        color:#0591aa;
        text-decoration:none;
    }
    .abc:hover{
        text-decoration:#0591aa;
        text-decoration:underline;
    }
    /*!*========*!下面是图片列表*/
    .zi{
       color: silver;
       margin-bottom: 1rem
    }
    .zi:hover{
        cursor: pointer;
        text-decoration:silver;
        text-decoration:underline;
    }
    .xiangqing{
        color: #555;
    }
    .xiangqing:hover{
        text-decoration:#0591aa;
        text-decoration:underline;
        color:#0591aa;
        cursor: pointer;
    }
    .box{
        overflow: hidden;
    }
    .bigimg{
          float: left;
          width: 252px;
          height: 370px;
          position: relative;
          margin: 0 0 10px 10px;
          padding: 10px;
          border: 0.3rem solid transparent;
       }
    .bigimg:hover{
        border: 0.3rem solid #3da8b9;
    }
    .bigimg:hover .spec{
        display: block;
    }
    .wapper{
        position: absolute;
        top: 0;
        left: 0;
        width: auto;
        padding: 10px;
        border: 1px solid #eee;
    }
    .item-img{
        width: 250px;
        height: 200px;
        overflow: hidden;
        text-align: center;
        display: table;
    }
    .price{
        font-size: 20px;
        color: #c00;
    }
    .name{
        height: 40px;
        line-height: 20px;
        color: #666;
        margin-bottom: 5px;
        overflow: hidden;
        word-break: break-all;
    }
    .name>a:hover{
        color:#3da8b9 ;
        text-decoration:underline;
    }
    .name>a{
        text-decoration:none;
    }
    .spec{
        line-height: 35px;
        padding: 0 5px;
        display: none;
    }
    .spec1{
        color: #999;
    }
    .spec1:first-child{
        margin-right: 2rem;
    }
    .spec1:last-child{
        margin-left: 1rem;
    }
    .spec2>.el-input{
        width:50%;
    }
    /*=========下面是底部*/
    .bottom{
        overflow: hidden;
    }
    .elRow{
        margin: 3rem 0 ;
    }
    .total{
        float: left;
    }
    .fenye{
        text-align: center;
    }
    .el{
        height: 2rem;
    }
    /*=====*/
    .bottom>a{
        display: block;
        width: auto;
        height: 35px;
        line-height: 35px;
        color: #333;
        padding:0.3rem 80px;
        /*padding-left: 80px;*/
        font-size: 14px;
        background: #f3f3f3;
        margin: 1rem auto;
        cursor: pointer;
        text-decoration:none;
    }
    .bottom>a>i{
        color:  rgb(0, 184, 210); ;
    }
    .bottom>a:hover{
        background:  rgb(0, 184, 210);
        color: white;
    }
    .bottom>a:hover  i{
        color: white;
    }
</style>